<template>
  <div class="container">
    <el-form :model="msgForm" v-loading="loading" label-width="150px">
      <el-row :gutter="10">
        <el-col :span="15">
          <el-form-item label="支付成功文案：" label-width="250px" prop="pay_success_text">
            <el-input v-model.trim="msgForm.pay_success_text" placeholder="支付成功文案"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="15">
          <el-form-item label="预授权成功文案：" label-width="250px" prop="authorization_success_text">
            <el-input v-model.trim="msgForm.authorization_success_text" placeholder="预授权成功文案"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="15">
          <el-form-item label="合同签署成功：" label-width="250px" prop="contract_sign_success_text">
            <el-input v-model.trim="msgForm.contract_sign_success_text" placeholder="合同签署成功"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="15">
          <el-form-item label="客服图片链接：" label-width="250px" prop="enterprise_wechat">
            <el-input v-model.trim="msgForm.enterprise_wechat" placeholder="客服图片链接"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="15">
          <el-form-item label="快手，支付宝表单商品创建成功文案：" label-width="250px" prop="create_store_order_success_text">
            <el-input v-model.trim="msgForm.create_store_order_success_text" placeholder="快手，支付宝表单商品创建成功文案"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="15">
          <el-form-item label="支付宝订单列表链接：" label-width="250px" prop="alipay_url_order_list">
            <el-input v-model.trim="msgForm.alipay_url_order_list" placeholder="支付宝订单列表链接"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="footer-center">
      <el-button type="primary" :disabled="disabledbtn" @click="handlePutConfigMsgInfo">确 定 </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getConfigMsgInfo, putConfigMsgInfo } from "@/utils/api/admin/system/config.ts";
import { useState } from "@/hooks/useState";
import type { IMsgInfo } from "@/types/system/config";
const { disabledbtn, loading, toggleState } = useState();

const msgForm = reactive({
  pay_success_text: "",
  authorization_success_text: "",
  contract_sign_success_text: "",
  enterprise_wechat: "",
  create_store_order_success_text: "",
  alipay_url_order_list: ""
});

/* 获取msg配置 */
function handleGetConfigMsgInfo() {
  toggleState(true);
  getConfigMsgInfo<IMsgInfo>()
    .then(res => {
      msgForm.pay_success_text = res.result.pay_success_text;
      msgForm.authorization_success_text = res.result.authorization_success_text;
      msgForm.contract_sign_success_text = res.result.contract_sign_success_text;
      msgForm.enterprise_wechat = res.result.enterprise_wechat;
      msgForm.create_store_order_success_text = res.result.create_store_order_success_text;
      msgForm.alipay_url_order_list = res.result.alipay_url_order_list;
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}

/* 修改msg配置 */
function handlePutConfigMsgInfo() {
  toggleState(true);
  putConfigMsgInfo(msgForm)
    .then(() => {
      ElMessage.success("修改成功");
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}

handleGetConfigMsgInfo();
</script>

<style lang="scss" scoped>
/* Add your styles here */
/* 底部按钮居中 */
.footer-center {
  margin: 10px 0;
  text-align: center;
}
</style>
